<template>
    <view>
        <view class="cart_topbox">
            <view class="cart_num">{{ '全部 ' + shop_Item_lenght }}</view>
            <view class="cart_man" @click="man_btn">{{ del_type == 0 ? '管理' : '退出管理' }}</view>
        </view>
        <view class="cart_list" v-if="shopList.length">
            <view class="list_cont" v-for="(item, index) in shopList" :key="index">
                <view class="shop_namebox">
                    <block v-if="del_type == 0">
                        <view class="shop_change" v-if="!item.me_checked" @click="me_btn(index)"></view>
                        <image v-else class="sel_img"
                            src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732782633833446.png"
                            @click="me_btn(index)"></image>
                    </block>
                    <view class="shop_name">{{ item.ShopName ? item.ShopName : '' }}</view>
                    <image class="right_arr"
                        src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732759070302133.png"></image>
                </view>
                <view class="goods_cont" v-for="(value, i) in item.Item" :key="i">
                    <block v-if="del_type == 0">
                        <view class="shop_change" v-if="!value.checked" @click="sel_btn(index, i)"></view>
                        <image v-else class="sel_img"
                            src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732782633833446.png"
                            @click="sel_btn(index, i)"></image>
                    </block>
                    <image class="goods_img" :src="value.ProductImgs" mode="aspectFill"></image>
                    <view class="goods_right">
                        <view class="goods_name hiddenText">{{ value.ProductName }}</view>
                        <view class="goods_sp">
                            <view class="sp_name hiddenText">{{ value.ProductStyle }}</view>
                            <!-- <image class="down_arr" src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17327591074411045.png"></image> -->
                        </view>
                        <view class="goods_pricebox">
                            <!-- <view class="price_text"><text class="pr_icon">￥</text>{{total_price(value)}}</view> -->
                            <view class="price_text"><text class="pr_icon">￥</text>{{ value.TotalPrice }}</view>
                            <view class="goods_numbox" v-if="del_type == 0">
                                <image class="sum_icon"
                                    src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732759124570198.png"
                                    @click="red_btn(value, index, i)"></image>
                                <view class="goods_sum">{{ value.Qty }}</view>
                                <image class="sum_icon"
                                    src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732759144921321.png"
                                    @click="inc_btn(value, index, i)"></image>
                            </view>
                            <view class="del_btn" v-else @click="del_shop(value)">删除</view>
                        </view>
                    </view>
                </view>
            </view>
            <BtmLogo></BtmLogo>
        </view>
        <block v-else>
            <EmptyBox text="马上去购物~"></EmptyBox>
            <BtmLogo></BtmLogo>
        </block>
        <view class="like_box">
            <!-- <view class="like_title">
                <view class="til_icon"></view>
                <view class="til_text">你可能还喜欢</view>
                <view class="til_icon2"></view>
            </view> -->
            <!-- <view class="shoplistbox">
                <view class="shopcont"  @click="goDetail(item.ID)">
                    <image class="shopimg" :src="item.Images.split(',')[0]" mode="aspectFill"></image>
                    <view class="shopname">{{item.ProductName?item.ProductName:''}}</view>
                    <view class="shop_pircebox">
                        <view class="price_title"><text class="price_icon">￥</text>{{item.Price?item.Price:'0'}}</view>
                        <view class="soid">{{'已售'+(item.VirtualSellNum?item.VirtualSellNum:'0')}}</view>
                    </view>
                </view>
            </view> -->
        </view>

        <view style="height:100rpx;"></view>
        <view class="botoom_box">
            <block v-if="del_type == 0">
                <view v-if="che_all" class="botoom_change" @click="sel_all"></view>
                <image v-else class="sel_img"
                    src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732782633833446.png" @click="sel_all_f">
                </image>
                <view class="quanx">全选</view>
                <view class="quantity">{{ '已选' + sel_lenght + ',合计:' }}</view>
                <view class="total_num"><text class="total_icon">￥</text>{{ totalNum }}</view>
                <view class="set_btn" @click="pay_add">去结算</view>
            </block>
            <block v-else>
                <!-- <view v-if="che_all" class="botoom_change" @click="del_all"></view>
                 <image v-else class="sel_img" src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732782633833446.png" @click="sel_all_f"></image>
                 <view class="quanx">全选</view> -->
                <!-- <view class="quantity">{{'已选'+sel_lenght+',合计:'}}</view>
                <view class="total_num"><text class="total_icon">￥</text>{{totalNum}}</view> -->
                <view class="set_btn" @click="del_all">删除全部</view>
            </block>
        </view>
        <uni-popup ref="addrPopup" type="bottom">
            <view class="addrebox">
                <view class="address_box" @click="nav_to('/pages/Myaddress/selectAddress?type=1')">
                    <view class="address_cell">
                        <view class="icon">
                            <image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1722933899855827.png"
                                mode="aspectFill"></image>
                        </view>
                        <view class="address_content">
                            <view class="cell_name">
                                {{ myAddress ? `${myAddress.Accepter} ${myAddress.Phone}` : '请选择收货地址' }}
                            </view>
                            <uni-icons type="right" size="14"></uni-icons>
                        </view>
                    </view>
                    <view class="address_cell" v-if="myAddress">
                        <view class="icon"></view>
                        <view class="address_content">
                            <view class="cell_name cell_lit">
                                {{ myAddress.Province }}{{ myAddress.City }}{{ myAddress.Area || '' }}{{
                                myAddress.Address }}
                            </view>
                        </view>
                    </view>
                </view>
                <view class="botoom_box">
                    <view class="quantity">{{ '已选' + sel_lenght + ',合计:' }}</view>
                    <view class="total_num"><text class="total_icon">￥</text>{{ totalNum }}</view>
                    <view class="set_btn" @click="order_add">去结算</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            shopList: [],
            del_type: 0,
            myAddress: {},
        };
    },
    computed: {
        //总价
        totalNum() {
            let sum = 0
            for (let i = 0; i < this.shopList.length; i++) {
                for (let j = 0; j < this.shopList[i].Item.length; j++) {
                    if (this.shopList[i].Item[j].checked) {
                        // sum += (this.shopList[i].Item[j].Qty * this.shopList[i].Item[j].Price)
                        sum += this.shopList[i].Item[j].TotalPrice
                    }

                }
            }
            return sum.toFixed(2)
        },
        //已选数量
        sel_lenght() {
            let num = 0
            for (let i = 0; i < this.shopList.length; i++) {
                for (let j = 0; j < this.shopList[i].Item.length; j++) {
                    if (this.shopList[i].Item[j].checked) {
                        num += 1
                    }
                }

            }
            return num
        },
        //全部商品
        shop_Item_lenght() {
            let num = 0
            for (let i = 0; i < this.shopList.length; i++) {
                for (let j = 0; j < this.shopList[i].Item.length; j++) {
                    num += 1
                }

            }
            return num
        },
        //全选
        che_all() {
            let che_all = false
            if (this.shopList.length == 0) {
                che_all = true
                return che_all
            }
            for (let i = 0; i < this.shopList.length; i++) {
                for (let j = 0; j < this.shopList[i].Item.length; j++) {
                    if (!this.shopList[i].Item[j].checked) {
                        che_all = true
                        return che_all
                    }
                }

            }
            return che_all
        },
    },
    onLoad() {
        // this.MyCart()
        this.getMyAddress()
        uni.$on('select', data => {
            this.myAddress = data
        })
    },
    onShow() {
        this.MyCart()
        this.getMyCartNum()
    },
    onUnload() {
        uni.$off('select')
    },
    methods: {
        //删除全部
        async del_all() {
            let list = JSON.parse(JSON.stringify(this.shopList))
            this.shopList = []
            for (let i = 0; i < list.length; i++) {
                for (let j = 0; j < list[i].Item.length; j++) {
                    let res = await this.$api.post('ShopCart/Delete', {
                        ID: list[i].Item[j].ID
                    })

                }
            }
            this.MyCart()
        },
        async order_add() {
            let list = []
            for (let i = 0; i < this.shopList.length; i++) {
                for (let j = 0; j < this.shopList[i].Item.length; j++) {
                    if (this.shopList[i].Item[j].checked) {
                        list.push(this.shopList[i].Item[j])
                    }
                }
            }
            if (list.length == 0) {
                this.$pv.msg('至少选择一个商品')
                return
            }
            if (!this.myAddress) {
                this.$pv.msg('请选择地址')
                return
            }
            let idstring = []
            console.log(list, 'listlist');

            for (let i = 0; i < list.length; i++) {
                if (list[i].checked) {
                    idstring.push(list[i].ID)
                }
            }
            console.log(idstring, '2222');
            let _this = this
            let res = await this.$api.post('ShopCart/Submit', {
                IDStr: idstring.join(','),
                Delivery_Address: this.myAddress.Address,
                Delivery_Accepter: this.myAddress.Accepter,
                Delivery_Phone: this.myAddress.Phone,
                CouponNo: '',
                Discounts: '1',
                Remark: '',
                Delivery_Province: this.myAddress.Province,
                Delivery_City: this.myAddress.City,
            })
            if (res.code == 0) {
                let response = await this.$api.post('/Payment/PayV2', {
                    EventType: res.data.EventType,
                    EventID: res.data.EventID,
                    body: res.data.body,
                    total_fee: res.data.total_fee,
                    SourcePage: 'pages/store/shop_cart',
                    PayChannel: 'weixin',
                });
                if (response.code == 0) {
                    let payObj = JSON.parse(response.data);
                    // console.log(payObj, '==================PayV2----res.data')

                    uni.requestPayment({
                        provider: 'wxpay',
                        // #ifdef MP-WEIXIN
                        timeStamp: payObj.timeStamp,
                        nonceStr: payObj.nonceStr,
                        package: payObj.package,
                        signType: payObj.signType,
                        paySign: payObj.paySign,
                        // #endif
                        success: async function (res) {
                            _this.$pv.msg('支付成功');
                            _this.$refs.addrPopup.close()
                            _this.nav_to('/pages/order/orderList?index=99')

                        },
                        fail: function (err) {
                            _this.$pv.msg('您已取消支付');
                        },
                    });
                } else if (response.code == 999) {
                    _this.$pv.msg('支付成功');
                    _this.$refs.addrPopup.close()
                    _this.nav_to('/pages/order/orderList?index=99')
                }
            }else if(res.code == 100){
                this.MyCart()
                this.getMyCartNum()
                _this.$pv.msg(res.message);
            }
        },
        pay_add() {
            this.$refs.addrPopup.open()
        },
        async getMyAddress() {
            let res = await this.$api.post('UserAddress/MyDefaultAddress')
            this.myAddress = res.data || false
        },
        async del_shop(value) {
            let res = await this.$api.post('ShopCart/Delete', {
                ID: value.ID
            })
            if (res.code == 0) {
                this.$pv.msg('删除成功')
                this.MyCart()
            }
        },
        man_btn() {
            if (this.del_type == 0) {
                this.del_type = 1
            } else {
                this.del_type = 0
            }

        },
        //全选
        sel_all() {

            for (let i = 0; i < this.shopList.length; i++) {
                for (let j = 0; j < this.shopList[i].Item.length; j++) {
                    this.shopList[i].Item[j].checked = true
                }

            }
        },
        sel_all_f() {
            for (let i = 0; i < this.shopList.length; i++) {
                for (let j = 0; j < this.shopList[i].Item.length; j++) {
                    this.shopList[i].Item[j].checked = false
                }

            }
        },
        //商家选中
        me_btn(index) {
            this.shopList[index].me_checked = !this.shopList[index].me_checked
            if (this.shopList[index].me_checked) {
                for (let i = 0; i < this.shopList[index].Item.length; i++) {
                    this.shopList[index].Item[i].checked = true
                }
            } else {
                for (let i = 0; i < this.shopList[index].Item.length; i++) {
                    this.shopList[index].Item[i].checked = false
                }
            }
        },
        //单个选中
        sel_btn(index, i) {
            this.shopList[index].Item[i].checked = !this.shopList[index].Item[i].checked

            let is_me = 1
            for (let j = 0; j < this.shopList[index].Item.length; j++) {
                if (!this.shopList[index].Item[j].checked) {
                    is_me = -1
                    break
                }

            }
            console.log(is_me, '111');

            this.shopList[index].me_checked = is_me == -1 ? false : true
        },
        //减少
        async red_btn(value, index, i) {
            if (value.Qty > 1) {
                value.Qty = value.Qty - 1
            }
            uni.showLoading({
                title: '加载中'
            });
            const that = this
            let res = await this.$api.post('ShopCart/UpdateNum', {
                ID: value.ID,
                Qty: value.Qty
            })
            uni.hideLoading();
            const { code, data, message } = res
            if (code == 0) {
                const newData = { ...data, checked: that.shopList[index].Item[i].checked, delcked: that.shopList[index].Item[i].delcked }

                that.$set(that.shopList[index].Item, i, newData);
            } else {
                that.$pv.msg(message)
            }

        },
        //增加
        async inc_btn(value, index, i) {
            uni.showLoading({
                title: '加载中'
            });
            const that = this
            let res = await that.$api.post('ShopCart/UpdateNum', {
                ID: value.ID,
                Qty: value.Qty + 1
            })
            uni.hideLoading();
            const { code, data, message } = res
            if (code == 0) {
                const newData = { ...data, checked: that.shopList[index].Item[i].checked, delcked: that.shopList[index].Item[i].delcked }

                that.$set(that.shopList[index].Item, i, newData);
            } else {
                that.$pv.msg(message)
            }


        },
        total_price(value) {
            let price = value.Price * value.Qty
            return price.toFixed(2)
        },
        async MyCart() {
            let res = await this.$api.post('ShopCart/MyCart', {

            })
            if (res.code == 0) {
                this.shopList = res.data
            }
            if (this.shopList.length > 0) {
                for (let i = 0; i < this.shopList.length; i++) {
                    this.$set(this.shopList[i], 'me_checked', false)
                    for (let j = 0; j < this.shopList[i].Item.length; j++) {
                        this.$set(this.shopList[i].Item[j], 'checked', false)
                        this.$set(this.shopList[i].Item[j], 'delcked', false)
                    }
                }
            }
        }
    },
}
</script>
<style lang='scss'>
page {
    background-color: #f6f6f6;
}

.sel_img {
    width: 32rpx;
    height: 32rpx;
    margin-right: 16rpx;
}

.cart_topbox {
    padding-left: 48rpx;
    padding-right: 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24rpx 0;

    .cart_num {
        font-size: 28rpx;
        font-weight: bold;
    }

    .cart_man {
        // width: 96rpx;
        padding: 0 24rpx;
        height: 48rpx;
        background: #FFFFFF;
        border-radius: 27rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
    }
}

.cart_list {
    padding: 0 24rpx;

    .list_cont {
        width: 702rpx;
        // height: 326rpx;
        background: #FFFFFF;
        border-radius: 24rpx;
        padding: 32rpx 24rpx;
        margin-bottom: 24rpx;

        .shop_namebox {
            display: flex;
            align-items: center;
            margin-bottom: 26rpx;

            .shop_change {
                width: 32rpx;
                height: 32rpx;
                border-radius: 50%;
                border: 2rpx solid #999999;
                margin-right: 16rpx;
            }

            .shop_name {
                font-size: 28rpx;
                font-weight: bold;
                margin-right: 4rpx;
            }

            .right_arr {
                width: 24rpx;
                height: 24rpx;
            }
        }

        .goods_cont {
            display: flex;
            align-items: center;
            margin-bottom: 48rpx;

            .shop_change {
                width: 32rpx;
                height: 32rpx;
                border-radius: 50%;
                border: 2rpx solid #999999;
                margin-right: 16rpx;
            }

            .goods_img {
                width: 196rpx;
                height: 196rpx;
                border-radius: 24rpx;
                margin-right: 24rpx;
                background-color: skyblue;
            }

            .goods_right {
                .goods_name {
                    width: 386rpx;
                    font-size: 28rpx;
                    font-weight: bold;
                    margin-bottom: 16rpx;
                }

                .goods_sp {
                    display: flex;
                    align-items: center;
                    width: 386rpx;
                    height: 48rpx;
                    background: #F2F2F2;
                    border-radius: 28rpx;
                    padding: 8rpx 16rpx;
                    margin-bottom: 52rpx;

                    .sp_name {
                        font-size: 24rpx;
                        color: #666666;
                    }

                    .down_arr {
                        width: 24rpx;
                        height: 24rpx;
                        margin-left: auto;
                    }
                }

                .goods_pricebox {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .del_btn {
                        font-size: 32rpx;
                        // font-weight: bold;
                        color: #F91C1C;
                    }

                    .price_text {
                        font-size: 36rpx;
                        font-weight: bold;
                        color: #F91C1C;
                    }

                    .pr_icon {
                        font-size: 24rpx;
                        font-weight: bold;
                        color: #F91C1C;
                    }

                    .goods_numbox {
                        display: flex;
                        align-items: center;

                        .sum_icon {
                            width: 32rpx;
                            height: 32rpx;
                        }

                        .goods_sum {
                            width: 80rpx;
                            height: 44rpx;
                            background: #F2F2F2;
                            border-radius: 8rpx;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 24rpx;
                            color: #0D0D0D;
                        }
                    }
                }
            }
        }
    }
}

.like_box {
    padding: 0 22rpx;
    margin-top: 36rpx;

    .like_title {
        width: 240rpx;
        margin: 0 auto;
        margin-bottom: 24rpx;
        display: flex;
        align-items: center;

        .til_icon {
            width: 20rpx;
            height: 4rpx;
            background: linear-gradient(270deg, #EEEEEE 0%, #FF6030 100%);
            border-radius: 2rpx;
        }

        .til_text {
            font-size: 28rpx;
            font-weight: bold;
        }

        .til_icon2 {
            width: 20rpx;
            height: 4rpx;
            background: linear-gradient(90deg, #EEEEEE 0%, #FF6030 100%);
            border-radius: 2rpx;
        }
    }
}

.shoplistbox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .shopcont {
        width: 344rpx;
        height: 546rpx;
        background: #FFFFFF;
        border-radius: 16rpx;
        margin-right: 16rpx;
        margin-bottom: 16rpx;

        .shopimg {
            width: 344rpx;
            height: 344rpx;
            // background-color: red;
            border-radius: 16rpx 16rpx 0rpx 0rpx;
        }

        .shopname {
            width: 312rpx;
            height: 74rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 16rpx auto;
            margin-bottom: 20rpx;
            font-size: 28rpx;
            font-weight: bold;
        }

        .shop_pircebox {
            width: 312rpx;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .price_title {
                font-size: 40rpx;
                font-weight: bold;
                color: #FF6030;
            }

            .price_icon {
                font-size: 28rpx;
                font-weight: bold;
                color: #FF6030;
            }

            .soid {
                font-size: 24rpx;
                color: #999999;
            }
        }
    }
}

.shoplistbox .shopcont:nth-child(2n) {
    margin-right: 0rpx;
}

.botoom_box {
    display: flex;
    align-items: center;
    width: 750rpx;
    height: 88rpx;
    background: #FFFFFF;
    padding: 0 16rpx;
    position: fixed;
    bottom: 0;
    left: 0;

    .botoom_change {
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        border: 2rpx solid #999999;
    }

    .quanx {
        font-size: 24rpx;
        margin-left: 18rpx;
    }

    .quantity {
        font-size: 24rpx;
        margin-left: 10rpx;
    }

    .total_num {
        font-size: 36rpx;
        font-weight: bold;
        color: #F91C1C;
    }

    .total_icon {
        font-size: 24rpx;
        color: #F91C1C;
        font-weight: bold;
    }

    .set_btn {
        width: 168rpx;
        height: 72rpx;
        background: linear-gradient(98deg, #FF7114 0%, #FF3B02 100%);
        border-radius: 36rpx;
        margin-left: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-weight: bold;
        color: #fff;
    }
}

.addrebox {
    background-color: #fff;
    width: 100%;
    height: 350rpx;
    border-radius: 16rpx 16rpx 0 0;
}

.address_box {
    padding: 24rpx;
    background: #F6F6F6;
    border-radius: 16rpx;

    .address_cell {

        display: flex;
        align-items: center;

        .icon {
            width: 40rpx;
            height: 40rpx;
            margin-right: 8rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .address_content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .cell_name {
                font-size: 30rpx;
                font-weight: bold;
                color: #333333;
            }

            .cell_lit {
                font-size: 24rpx;
                color: #666666;
                font-weight: 500;
            }
        }
    }

    .address_cell:nth-child(2) {
        margin-top: 10rpx;
    }
}
</style>